<template>
    <el-container direction="vertical" v-if="listView">
        <el-row>
            <el-col :span="24">
                <h1>字典管理&nbsp;>&nbsp;字典列表</h1>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <el-form-item label="类型:">
                    <el-select v-model="queryParam.type" placeholder="请选择类型">
                        <el-option
                        v-for="item in types"
                        :key="item"
                        :label="item"
                        :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                
            </el-col>
            <el-col :span="8">
                <el-row justify="end">
                    <el-button type="primary" @click="search">搜索</el-button>
                    <el-button type="default" @click="clear">重置</el-button>
                </el-row>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-row justify="start">
                    <el-button type="primary" @click="dictCreate">+新增</el-button>
                </el-row>
            </el-col>
        </el-row>
        <el-table :data="view.list"
            tooltip-effect="dark"
            style="width:100%">
            <el-table-column
                label="键值"
                width="250"
                prop="value">
            </el-table-column>
            <el-table-column
                label="键名"
                width="150"
                prop="label">
            </el-table-column>
            <el-table-column
                label="类型"
                width="200"
                prop="type">
            </el-table-column>
            <el-table-column
                label="描述"
                width="200"
                prop="description">
            </el-table-column>
            
            <el-table-column
                label="操作">
                <template #default="scope">
                        <el-button @click="dictEdit(scope.row)" type="default">
                            编辑
                        </el-button>
                        <el-button @click="dictDelete(scope.row)" type="danger">
                            删除
                        </el-button>
                    </template>
            </el-table-column>
        </el-table>
        <el-pagination background
            v-model:page-size="view.pageInfo.pageSize"
            layout="prev, pager, next"
            :current-page="view.pageInfo.current" 
            @current-change="currentChange"
            :pageCount="view.pageInfo.total%view.pageInfo.pageSize==0 ? view.pageInfo.total/view.pageInfo.pageSize : Math.floor(view.pageInfo.total/view.pageInfo.pageSize)+1" />

    </el-container>
    <el-container direction="vertical" v-else>
        <Item :item="view.item" @onCancel="switchPage"></Item>
    </el-container>
</template>

<script>
import Item from './Item.vue';
import {ElMessage} from "element-plus"

export default{
    beforeMount(){
        this.axios.get("/backend/admin/dict/type/all").then((r)=>{
            if(r.status === 200){
                this.types = r.data.data
            }
        })
    },
    mounted(){
        this.search()
    },
    data(){
        return {
            listView:true,
            queryParam:{
                type:"",
                pageInfo:{
                    current:1,
                    pageSize:10
                }
            },
            types:[],
            view:{
                list:[],
                item:{
                    id: null,
                    value: '',
                    label: '',
                    type: '',
                    description: '',
                    remarks: ''
                },
                pageInfo:{}
            }
        }
    },
    methods:{
        switchPage:function(v){
            this.listView = v;
            if(v){
                this.view.item = {}
                this.query()
            }
        },
        search:function(){
            this.queryParam.pageInfo.current=1
            this.query()
        },
        query:function(){
            this.axios.post("/backend/admin/dict/paging",this.queryParam).then((r)=>{
                if(r.status == 200){
                    this.view = r.data.data
                    this.queryParam.pageInfo=r.data.data.pageInfo
                }
            })
        },
        clear:function(){
            this.queryParam = {
                type:"",
                pageInfo:{
                    current:1,
                    pageSize:10
                },
                order:{
                    columnName:"",
                    sortValue:""
                }
            }
            this.search();
        },
        currentChange:function(value){
            this.queryParam.pageInfo.current = value
            this.query()
        },
        dictCreate:function(){
            this.view.item = {
            }
            this.listView = false;
        },
        dictEdit:function(item){
            console.log("Variable [item] -> " + item)
            this.view.item = {
                id: item.id,
                value: item.value,
                label: item.label,
                type: item.type,
                sort: item.sort,
                description: item.description,
                remarks: item.remarks,
            }
            this.listView = false
        },
        dictDelete:function(item){
            this.$confirm('你确认要删除该数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.axios.post("/backend/admin/dict/delete?id=" + item.id).then((r)=>{
                    if(r.status == 200){
                        ElMessage({
                            message:"删除成功",
                            type:"success",
                            duration:3000
                        })
                        this.query()
                    }else{
                        ElMessage({
                            message: r.message,
                            type:"error",
                            duration:3000
                        });
                    }
                })
            }).catch(() => {
                
            })
        }
    },
    components:{
        Item : Item,
    }
}
</script>